<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="dynamicexample">
        <h3>滑动</h3>
        <p v-pin:[direction]="200">200px .</p>
        <!---有vue标签的 元素，是不是都会被解析，那要解析，是不是需要先定位 bind 在内存中 ---- instered 替换元素-->
         <!---对象赋值----->
         <div :class="{class1:param1,class2:param2}"></div>
        <div v-demo="{ color: 'white', text: 'hello!' }"></div>
    </div>
</body>

<script>

    Vue.directive('demo', function (el, binding) {
        console.log(binding.value.color) // => "white"
        console.log(binding.value.text)  // => "hello!"
    })

    // json 能转成字符串
    let json = {
        name:'lilei',
        age:45
    }

    console.log(JSON.stringify(json))

    let vm = new Vue({
        el: '#dynamicexample',
        data: {
            direction: 'top',
            param1:true,
            param2:true,

        },
        directives: {
            pin: {
                bind: function (el, binding, vnode) {
                    el.style.position = 'fixed'
                    var s = (binding.arg == 'left' ? 'left' : 'top') //'left' ? 'left' : 'top' 三元运算符
                    // setTimeout setInterval this 也会发生变化
                    //s = this.direction;
                    //console.log(this);
                    el.style[s] = binding.value + 'px'
                }
            }
        }
    })
    console.log(vm);

    // 指令的生命周期函数 , 至少有各 查找
    // bind      定位元素 
    // instered  替换元素
    // update    vnode 更新


    //动态指令----动态能想到啥？变量

    // json 数据动态去获取它的值 obj[params]   
    // Vue.directive('pin', { //全局定义 

    // });




</script>

</html>